<template>
  <div class="container">
    <div class="container_header">
        <div class="grid-content bg-purple">
          <h2>分类管理</h2>
        </div>
        <div class="grid-content bg-purple">
         <el-button type="primary" size="small" icon="el-icon-plus" @click="addCategory">添加分类</el-button>
        </div>

    </div>
    
    <el-table
      :data="categoryList"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="{row}">
          <el-button type="primary" size="small" icon="el-icon-edit" @click="changeCategory(row.id)">修改</el-button>
          <el-popconfirm
            title="确定删除吗？"
            @confirm=handlerDeleteCategory(row.id)
          >
            <el-button slot="reference" type="danger" size="small" icon="el-icon-delete" class="ml-6">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="handlerType"
      :visible.sync="dialogVisible"
      width="30%"
      center>
      <div>
        <el-input
          placeholder="请输入新分类名称"
          v-model="newCategoryName"
          clearable>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerCategory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      categoryList: [],
      newCategoryName: '',
      dialogVisible: false,
      handlerType: '添加分类',
      changeId: 0
    }
  },
  created () {
    this.handlerGetData()
  },
  methods: {
    async handlerGetData() {
      await this.$store.dispatch('category/get_category_list')
      this.categoryList = this.$store.state.category.categoryList
    },
    addCategory() {
      this.handlerType = "添加分类";
      this.dialogVisible = true;
    },
    changeCategory(id) {
      this.handlerType = "修改分类";
      this.dialogVisible = true;
      this.changeId = id;
    },
    async handlerCategory() {
      if (!this.newCategoryName.trim()) {
        this.$notify.error({
          title: '错误',
          message: "请输入新分类名",
        })
        return
      }
      let data;
      if (this.handlerType === "添加分类") {
        let res = await this.$req.post({
          url: "/category",
          data: {
            name: this.newCategoryName
          }
        })
        data = res.data
      } else {
          let res = await this.$axios({
            method: "put",
            url: "/category",
            data: {
              id: this.changeId,
              name: this.newCategoryName
            }
          })
          data = res.data
      }
      if (data.code === 200) {
        this.handlerGetData()
        this.$notify({
          title: '成功',
          message: data.msg,
          type: 'success'
        })
      } else {
        this.$notify.error({
          title: '错误',
          message: data.msg,
        });
      }
      this.newCategoryName = ""
      this.dialogVisible = false
    },
    async handlerDeleteCategory(id) {
      let {data} = await this.$axios({
        method: "DELETE",
        url: "/category?id="+id,
      })
      if(data.code === 200) {
        this.handlerGetData();
        this.$notify({
          title: '成功',
          message: data.msg,
          type: 'success'
        })
      } else {
         this.$notify.error({
          title: '错误',
          message: data.msg,
        });
      }
    }
  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>
.container_header {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 20px;
}
</style>